<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Stars Animation</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
</head>
<body>
<canvas id="starsCanvas"></canvas>

<script>
    const canvas = document.getElementById('starsCanvas');
    const ctx = canvas.getContext('2d');

    // 设置画布尺寸与屏幕相同
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    // 星星数组
    let stars = [];

    // 初始化星星
    function init() {
        for (let i = 0; i < 500; i++) {
            let x = Math.random() * canvas.width;
            let y = Math.random() * canvas.height;
            let r = Math.random() * 3 + 1; // 半径
            let s = Math.random() * 1.5 + 0.5; // 速度
            stars.push({x, y, r, s});
        }
    }

    // 清除画布并重新绘制星星
    function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        stars.forEach(star => {
            star.y += star.s;
            if (star.y > canvas.height) star.y = -star.r;

            ctx.beginPath();
            ctx.arc(star.x, star.y, star.r, 0, Math.PI * 2);
            ctx.fillStyle = 'white';
            ctx.fill();
        });
    }

    // 更新星星位置
    function update() {
        stars.forEach(star => {
            star.y += star.s;
            if (star.y > canvas.height) {
                star.y = -star.r;
                star.x = Math.random() * canvas.width;
            }
        });
    }

    // 主循环
    function animate() {
        requestAnimationFrame(animate);
        update();
        draw();
    }

    // 初始化和启动动画
    init();
    animate();

    // 窗口大小改变时更新画布尺寸
    window.addEventListener('resize', () => {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        init();
    });
</script>
</body>
</html>